<template>
  <view class="store_page flex-col">
    <view class="group_2 flex-col">
      <view class="text-wrapper_1 flex-row">
        <text class="text_3">设计师</text>
        <text class="text_4">案例</text>
        <text class="text_5">工地</text>
      </view>
      <view class="list_1 flex-col">
        <view @click="toDetail" class="list-items_1 flex-col" v-for="(item, index) in loopData0" :key="index">
          <view class="group_3 flex-row justify-between">
            <view class="image-text_1 flex-row">
              <image class="single-avatar_1" referrerpolicy="no-referrer" :src="item.lanhuimage0" />
              <view class="text-group_1 flex-col justify-between">
                <text class="text_6">张艺欢</text>
                <text class="text_7">擅长：简约&nbsp;|&nbsp;现代&nbsp;|&nbsp;中式</text>
              </view>
              <view v-if="item.slot2 === 2" class="tag_1 flex-col">
                <image class="icon_2" referrerpolicy="no-referrer"
                  src="https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNGbb7ea055bfc14b06691b51c8d31083c7.png" />
              </view>
            </view>
            <button class="button_1 fcc" @click="onClick_1">
              <text class="text_8">去预约</text>
            </button>
          </view>
          <view class="group_4 flex-row justify-between">
            <view class="tag_2 flex-col">
              <text class="text_9">作品数量：22</text>
            </view>
            <view class="tag_3 flex-col">
              <text class="text_10">在建工地：3</text>
            </view>
          </view>
          <view class="image-wrapper_1 flex-row justify-between">
            <image class="image_2" referrerpolicy="no-referrer" :src="item.lanhuimage1" />
            <image class="image_3" referrerpolicy="no-referrer" :src="item.lanhuimage2" />
            <image class="image_4" referrerpolicy="no-referrer" :src="item.lanhuimage3" />
          </view>
          <text v-if="item.slot1 === 1" class="text_11">优秀设计师</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
const loopData0 = [
  {
    lanhuimage0:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG45f4478158c8a2101f58bb465fa7c9a4.png',
    lanhutext0: '张艺欢',
    lanhutext1: '擅长：简约&nbsp;|&nbsp;现代&nbsp;|&nbsp;中式',
    lanhutext2: '去预约',
    lanhutext3: '作品数量：22',
    lanhutext4: '在建工地：3',
    lanhuimage1:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG58cd57826d228a063854b9e522d7bc83.png',
    lanhuimage2:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG2e3eef17ea6ddd1c2e97f961ba35d6ad.png',
    lanhuimage3:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG529f9611bdb6992b6808f95777cc5ab9.png',
    slot1: 1,
    slot2: 2,
  },
  {
    lanhuimage0:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG45f4478158c8a2101f58bb465fa7c9a4.png',
    lanhutext0: '张艺欢',
    lanhutext1: '擅长：简约&nbsp;|&nbsp;现代&nbsp;|&nbsp;中式',
    lanhutext2: '去预约',
    lanhutext3: '作品数量：22',
    lanhutext4: '在建工地：3',
    lanhuimage1:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG58cd57826d228a063854b9e522d7bc83.png',
    lanhuimage2:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG2e3eef17ea6ddd1c2e97f961ba35d6ad.png',
    lanhuimage3:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG529f9611bdb6992b6808f95777cc5ab9.png',
  },
]
const onClick_1 = () => {
  alert(1)
}
const toDetail = () => {
  // uni.navigateTo({
  //   url: '/pages/designer_detail/index'
  // });
}
</script>
<style lang="scss" scoped>
.store_page {
  background-color: rgba(245, 245, 245, 1);
  position: relative;
  width: 750rpx;
  height: 100%;
  overflow: hidden;

  .group_1 {
    background-color: rgba(255, 255, 255, 1);
    width: 750rpx;
    height: 100%;

    .box_1 {
      width: 682rpx;
      height: 36rpx;
      margin: 30rpx 0 0 42rpx;

      .text_1 {
        width: 108rpx;
        height: 36rpx;
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 1);
        font-size: 30rpx;
        letter-spacing: -0.30000001192092896px;
        font-family: AlibabaPuHuiTi-Regular;
        font-weight: normal;
        text-align: center;
        white-space: nowrap;
        line-height: 36rpx;
      }

      .thumbnail_1 {
        width: 34rpx;
        height: 22rpx;
        margin: 6rpx 0 0 438rpx;
      }

      .thumbnail_2 {
        width: 32rpx;
        height: 22rpx;
        margin: 6rpx 0 0 10rpx;
      }

      .image_1 {
        width: 50rpx;
        height: 24rpx;
        margin: 6rpx 0 0 10rpx;
      }
    }

    .nav-bar_1 {
      width: 750rpx;
      height: 100rpx;
      margin-top: 10rpx;

      .icon_1 {
        width: 18rpx;
        height: 34rpx;
        margin: 40rpx 0 0 36rpx;
      }

      .text_2 {
        width: 134rpx;
        height: 40rpx;
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 0.9);
        font-size: 34rpx;
        font-family: AlibabaPuHuiTi-Regular;
        font-weight: normal;
        text-align: center;
        white-space: nowrap;
        line-height: 40rpx;
        margin: 32rpx 0 0 256rpx;
      }

    }
  }

  .group_2 {
    width: 750rpx;
    height: 100%;
    margin-bottom: 2rpx;

    .text-wrapper_1 {
      background-color: rgba(255, 255, 255, 1);
      width: 750rpx;
      height: 88rpx;

      .text_3 {
        width: 90rpx;
        height: 42rpx;
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 1);
        font-size: 30rpx;
        font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 42rpx;
        margin: 24rpx 0 0 30rpx;
      }

      .text_4 {
        width: 60rpx;
        height: 42rpx;
        overflow-wrap: break-word;
        color: rgba(151, 151, 151, 1);
        font-size: 30rpx;
        font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
        font-weight: normal;
        text-align: right;
        white-space: nowrap;
        line-height: 42rpx;
        margin: 24rpx 0 0 30rpx;
      }

      .text_5 {
        width: 60rpx;
        height: 42rpx;
        overflow-wrap: break-word;
        color: rgba(151, 151, 151, 1);
        font-size: 30rpx;
        font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
        font-weight: normal;
        text-align: right;
        white-space: nowrap;
        line-height: 42rpx;
        margin: 24rpx 450rpx 0 30rpx;
      }
    }

    .list_1 {
      width: 750rpx;
      height: 730rpx;
      justify-content: space-between;
      margin: 2rpx 0 0 0;

      .list-items_1 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        height: 360rpx;
        margin-bottom: 10rpx;
        width: 750rpx;
        position: relative;
        justify-content: flex-center;

        .group_3 {
          width: 710rpx;
          height: 80rpx;
          margin: 30rpx 0 0 20rpx;

          .image-text_1 {
            width: 408rpx;
            height: 80rpx;

            .single-avatar_1 {
              width: 80rpx;
              height: 80rpx;
            }

            .text-group_1 {
              width: 308rpx;
              height: 78rpx;
              margin-left: 20rpx;

              .text_6 {
                width: 108rpx;
                height: 40rpx;
                overflow-wrap: break-word;
                color: rgba(51, 51, 51, 1);
                font-size: 36rpx;
                font-family: Songti SC-黑体;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 40rpx;
              }

              .text_7 {
                width: 308rpx;
                height: 28rpx;
                overflow-wrap: break-word;
                color: rgba(102, 102, 102, 1);
                font-size: 28rpx;
                font-family: Songti SC-细体;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 28rpx;
                margin-top: 10rpx;
              }
            }

            .tag_1 {
              background-color: rgba(51, 51, 51, 1);
              border-radius: 566px;
              height: 24rpx;
              width: 116rpx;
              margin: 8rpx 74rpx 0 -190rpx;

              .icon_2 {
                width: 24rpx;
                height: 24rpx;
              }
            }
          }

          .button_1 {
            border-radius: 357px;
            height: 42rpx;
            border: 0.5px solid rgba(97, 52, 27, 0.699999988079071);
            width: 92rpx;

            .text_8 {
              overflow-wrap: break-word;
              color: rgba(97, 52, 27, 1);
              font-size: 24rpx;
              font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
            }
          }
        }

        .group_4 {
          width: 332rpx;
          height: 38rpx;
          margin: 20rpx 0 0 120rpx;

          .tag_2 {
            background-color: rgba(97, 52, 27, 0.07);
            border-radius: 1px;
            height: 38rpx;
            width: 166rpx;

            .text_9 {
              width: 146rpx;
              height: 40rpx;
              overflow-wrap: break-word;
              color: rgba(97, 52, 27, 1);
              font-size: 24rpx;
              font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 40rpx;
              margin: -2rpx 0 0 10rpx;
            }
          }

          .tag_3 {
            background-color: rgba(97, 52, 27, 0.07);
            border-radius: 1px;
            height: 38rpx;
            width: 152rpx;

            .text_10 {
              width: 132rpx;
              height: 40rpx;
              overflow-wrap: break-word;
              color: rgba(97, 52, 27, 1);
              font-size: 24rpx;
              font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 40rpx;
              margin: -2rpx 0 0 10rpx;
            }
          }
        }

        .image-wrapper_1 {
          width: 548rpx;
          height: 142rpx;
          margin: 20rpx 0 30rpx 120rpx;

          .image_2 {
            width: 162rpx;
            height: 142rpx;
          }

          .image_3 {
            width: 172rpx;
            height: 142rpx;
            margin-left: 20rpx;
          }

          .image_4 {
            width: 174rpx;
            height: 142rpx;
            margin-left: 20rpx;
          }
        }

        .text_11 {
          position: absolute;
          left: 268rpx;
          top: 30rpx;
          width: 80rpx;
          height: 40rpx;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 16rpx;
          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
          font-weight: normal;
          text-align: left;
          line-height: 40rpx;
        }
      }
    }
  }
}
</style>
